<template>
  <el-container class="homecontainer">
    <el-header>
      <div class="head">
        <div class="header"></div>
        <div class="div2">
          <el-dropdown><span class="el-dropdown-link">管理员：
             <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            <i
                class="el-icon-arrow-down el-icon--right" style="margin-right: 15px"></i> </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><el-button @click="adminexit()">退出登录</el-button> </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
            background-color="#545c64"
            text-color="#fff"
            router
            default-active="2"
            unique-opened="unique-opened"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose">
          <el-menu-item index="/manage/home">
            <template slot="title"><i class="el-icon-s-fold"></i><span>首页</span></template>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-platform-eleme"></i><span>房屋管理</span></template>
            <el-menu-item index="/manage/house">房屋信息</el-menu-item>
            <el-menu-item index="/manage/houseAdd">房屋添加</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-school"></i><span>楼栋管理</span></template>
            <el-menu-item index="/manage/building"><i class="el-icon-s-tools"></i>楼栋信息</el-menu-item>
            <el-menu-item index="/manage/buildingAdd"><i class=" el-icon-circle-plus"></i>楼栋添加</el-menu-item>
            <el-menu-item index="/manage/addcells"><i class="el-icon-circle-plus-outline"></i>单元添加</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title"><i class="el-icon-user-solid"></i><span>居民</span></template>
            <el-menu-item index="/manage/addresident"><i class="el-icon-plus"></i>居民添加</el-menu-item>
            <el-menu-item index="/manage/residentlist"><span class="el-icon-user-solid"></span>居民列表</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title"><i class="el-icon-s-custom"></i><span>管理员</span></template>
            <el-menu-item index="/manage/admin"><i class="el-icon-user-solid"></i>管理员列表</el-menu-item>
            <el-menu-item index="/manage/adminadd"><i class="el-icon-circle-plus" v-if="adminname.roleId===1"></i>管理员添加
            </el-menu-item>
          </el-submenu>
          <el-submenu index="6">
            <template slot="title"><i class="el-icon-platform-eleme"></i><span>公告</span></template>
            <el-menu-item index="/manage/bulletinAdd">发布公告</el-menu-item>
            <el-menu-item index="/manage/bulletinList">公告列表</el-menu-item>
          </el-submenu>
          <el-submenu index="7">
            <template slot="title"><i class="el-icon-user-solid"></i><span>业主管理</span></template>
            <el-menu-item index="/manage/owner"><i class="el-icon-plus"></i>添加业主</el-menu-item>
            <el-menu-item index="/manage/ownerInfo"><i class="el-icon-s-order"></i>查看业主信息</el-menu-item>
          </el-submenu>
          <el-submenu index="8">
            <template slot="title"><i class="el-icon-user-solid"></i><span>员工管理</span></template>
            <el-menu-item index="/manage/staff"><i class="el-icon-s-order"></i>员工信息详情</el-menu-item>
          </el-submenu>

          <el-submenu index="9">
            <template slot="title"><i class="el-icon-s-grid"></i><span>投诉和保修</span></template>
            <el-menu-item index="/manage/complaint"><i class="el-icon-s-order"></i>投诉详情</el-menu-item>
            <el-menu-item index="/manage/rapair"><i class="el-icon-s-order"></i>报修详情</el-menu-item>
          </el-submenu>
          <!--          <el-menu-item index="9"><i class="el-icon-eleme"></i> <span slot="title">管理员</span></el-menu-item>-->
        </el-menu>
      </el-aside>
      <el-container>
        <el-main height="300px">
          <el-breadcrumb v-if="this.$router.currentRoute.name!=='首页'" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/manage/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
          </el-breadcrumb>
          <router-view></router-view>
        </el-main>
        <!--        <el-footer height="60px">2022-Spring Boot-Vue-Element-ui-Mabtis-Plus</el-footer>-->
      </el-container>
    </el-container>
  </el-container>
</template>
<script> export default {
  methods: {
    handleClick(row) {
    }, handleOpen() {
    }, handleClose() {
    }, adminexit() {
      console.log("=============")
      window.localStorage.removeItem("manageToken");
      window.localStorage.removeItem("admin");
      this.$message.success("退出成功!");
      this.$router.push({path: "/manage/login"});
    }
  }, created() {
    this.adminname = JSON.parse(window.localStorage.getItem("admin"));
  }, data() {
    return {
      adminname: {}
    }
  }
} </script>
<style scoped> .homecontainer {
  height: 700px;
  width: 100%;
}

.head {
  display: flex;
  flex-direction: row;
}

.header {
  align-items: center;
  margin-top: 25px;

}

.div2 {
  margin-left: 1290px;
  margin-top: 10px;
  float: right;
  font-size: 12px;
}

.el-header {
  background-color: rgba(46, 55, 68, 0.73);
  color: rgba(87, 2, 2, 0.99);
  text-align: center;
  line-height: 10px;
}

.el-footer {
  background-color: #5b5555;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #204f62;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #f4f4f5;
  color: #333;
  text-align: center;
  //line-height: 10px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #010e1b;
}
.head{
  background-image: url("@/assets/logoW.png");
  background-size: 160px;
  background-repeat: no-repeat;
}

.el-icon-arrow-down {
  font-size: 12px;
} </style>
